<template>
    <div class="container">
        <form>
            <div class="row">
                <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                    <!-- Exercise 1 -->
                    <!-- Create a Signup Form where you retrieve the following Information -->
                    <!-- Full Name (First Name + Last Name) -->
                    <app-full-name v-model="fullName"></app-full-name>
                    <!-- Mail -->
                    <div class="form-group">
                        <label>Mail</label>
                        <input type="email" class="form-control" v-model="email">
                    </div>
                    <!-- Password -->
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" class="form-control" v-model="password">
                    </div>
                    <!-- Store Data? Yes/No -->
                    <div class="form-group">
                        <label>Store Data?</label><br>
                        <label><input type="radio" value="Yes" v-model="storeData"> Yes</label>
                        <label><input type="radio" value="No" v-model="storeData"> No</label>
                    </div>

                    <!-- Exercise 2 -->
                    <!-- Only display the Form if it has NOT been submitted -->
                    <!-- Display the Data Summary ONCE the Form HAS been submitted -->
                    <button type="submit" v-on:click.prevent="isSubmitted = true"
                        class="btn btn-primary">Submit the Form</button>

                    <!-- Exercise 3 -->
                    <!-- Edit the Example from above and create a custom "Full Name" Control -->
                    <!-- which still holds the First Name and Last Name Input Field -->
                </div>
            </div>
        </form>
        <hr>
        <div class="row" v-if="isSubmitted">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>Your Data</h4>
                    </div>
                    <div class="panel-body">
                        <p>Full Name: {{ fullName }}</p>
                        <p>Mail: {{ email }}</p>
                        <p>Password: {{ password }}</p>
                        <p>Store in Database?: {{ storeData }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import FullName from './FullName.vue';

    export default {
        components: {
            'app-full-name': FullName,
        },

        data() {
            return {
                fullName: '',
                email: '',
                password: '',
                storeData: 'No',
                isSubmitted: false,
            };
        },
    };
</script>

<style>
</style>
